<template>
  <div class="wrapper">
    <div class="title">我的全部购物车</div>
    <div
      class="cart"
      v-for="(cart, key) in list"
      :key="key"
      @click="() => handleCartClick(key)"
    >
      <div className="cart__title">{{ cart.name || "沃尔玛" }}</div>
      <div
        class="cart__item"
        v-for="(product, innerKey) in cart"
        :key="innerKey"
      >
        <img class="cart__image" :src="product.imgUrl" />
        <div class="cart__content">
          <p class="cart__content__title">{{ product.name }}</p>
          <p class="cart__content__price">
            <span class="yen">&yen;</span>{{ product.price }} x
            {{ product.sales }}
            <span class="cart__content__total"
              ><span class="yen">&yen;</span
              >{{ (product.price * product.sales).toFixed(2) }}</span
            >
          </p>
        </div>
      </div>
      <div class="cart__total">共计{{ cart.total }}件</div>
    </div>
    <div v-if="Object.keys(list).length === 0" class="empty">暂无购物数据</div>
  </div>
  <Docker :currentIndex="1" />
</template>

<script>
import Docker from "../../components/Docker";
import { useRouter } from "vue-router";
import axios from "axios";

export default {
  name: "CartList",
  components: {
    Docker,
  },
  setup() {
    const list = JSON.parse(localStorage.cartList || "[]");
    //计算购物车总件数的逻辑
    for (let i in list) {
      const cart = list[i];
      const productList = cart;
      let total = 0;
      for (let j in productList) {
        const product = productList[j];
        total += product["count"];
      }
      cart.total = total;
    }
    console.log(list);
    //处理点击
    const router = useRouter();
    const handleCartClick = (key) => {
      router.push(`/orderConfirmation/${key}`);
    };
    return { list, handleCartClick };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.wrapper {
  overflow-y: auto;
  @include fix-content;
  background: $darkBgColor;
}
.title {
  font-size: 0.16rem;
  color: $content-fontcolor;
  line-height: 0.44rem;
  background: $bgColor;
  text-align: center;
}
.cart {
  margin: 0.16rem;
  padding-bottom: 0.16rem;
  background: $bgColor;
  &__title {
    padding: 0.16rem;
    line-height: 0.16rem;
    font-size: 0.16rem;
    color: $content-fontcolor;
    @include ellipsis;
  }
  &__item {
    display: flex;
    padding: 0 0.16rem 0.16rem 0.16rem;
    margin-bottom: 0.16rem;
  }
  &__image {
    margin-right: 0.16rem;
    width: 0.46rem;
    height: 0.46rem;
  }
  &__content {
    flex: 1;
    .yen {
      font-size: 0.12rem;
    }
    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-fontcolor;
      @include ellipsis;
    }
    &__price {
      margin: 0;
      font-size: 0.14rem;
      color: $hightlight-fontColor;
    }
    &__total {
      float: right;
      color: $dark-fontColor;
    }
  }
  &__total {
    line-height: 0.28rem;
    margin: 0 0.16rem;
    color: $light-fontColor;
    font-size: 0.14rem;
    text-align: center;
    background: $search-bgColor;
  }
}
.empty {
  margin-top: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.16rem;
  color: $light-fontColor;
}
</style>
